<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<base href="<%=basePath%>">
<html lang="zn-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <title>个人详情</title>
    <link rel="stylesheet" href="css/rate.css">
    <style type="text/css">
        .wrapper{
            padding-bottom: 20px;
        }
    </style>

</head>
<body class="f6">
<div class="wrap por height_98">
    <div class="main_body wrapper">
        <div class="rate_head">
            <img src="img/rate_toplayer.png"></div>
        <div class="type">
            <h3>个人信息</h3>
            <img class="avatar" style="display: none" src="http://111.231.253.134/static/common/img/mp/avatar.jpg" id="filePicker">
            <%--    <p class="vehicle_class">
                        <span class="class_selected">
                            <img class="selected_arr" src="img/selected.png">修改
                        </span>
                    <span>详情</span>
                </p>--%>
            <h3></h3>
        <%--    <p class="vehicle_type_out por">
                <img src="img/shaft.png" class="car_img type_car">
                <a class="type_truck">性别</a>
                <span class='vehicle_type'>
					<select name="sex" id="sex" class="b0 vehicle_truck_type type_truck">
						<option value="3">必选</option>
						<option value="1">男</option>
						<option value="0">女</option>
					</select>
                </span>
                <b class="type_detail type_truck" style="">?</b>
                <i class="type_arr"></i>
            </p>--%>
            <p class="weight_out por" style="">
                <img src="img/name0.png">
                编号
                <input type="text" class="weight" name="memberNum" disabled>
            </p>
            <p class="weight_out por" style="">
                <img src="img/name0.png">
                姓名
                <input type="text" placeholder="必填" class="weight" maxlength="30" name="name">
            </p>

            <p class="weight_out por wrap_call" style="">
                <img src="img/mobile0.png" id="mobile">
                手机
                <input type="text" placeholder="必填" class="weight" maxlength="11" name="mobile">
            </p>
            <p id="mobileTop"></p>
            <p class="weight_out por" style="">
                <img src="img/birth0.png">
                生日
                <input type="text" placeholder="选填" class="weight" maxlength="30" name="birthday">
            </p>
            <p class="weight_out por" style="">
                <img src="img/email0.png">
                邮箱
                <input type="email" placeholder="选填" class="weight" maxlength="30" name="email">
            </p>
            <p class="weight_out por" style="">
                <img src="img/wechat0.png">
                微信
                <input type="text" placeholder="选填" class="weight" maxlength="30" name="wechat">
            </p>
            <p class="weight_out por" style="">
                <img src="img/address0.png">
                地址
                <input type="text" placeholder="选填" class="weight" maxlength="30" name="addr">
            </p>

            <p class="weight_out por" style="">
                <img src="img/tel0.png">
                电话
                <input type="text" placeholder="选填" class="weight" maxlength="30" name="tel">
            </p>

            <p class="weight_out por" style="">
                <img src="img/intro0.png">
                介绍
                <input type="text" placeholder="选填" class="weight" maxlength="30" name="introduce">
            </p>

        </div>
        <div class="query">确定</div>
    </div>
    <div class="shaft_wrap">
        <div class="shaft_top">
				<span>
					<i></i>
				</span>
            说明
        </div>
        <div class="shaft_body">

        </div>
    </div>
    <div class="bottomLogo">
        <p></p>
        <p>点击右上角分享信息</p>
    </div>
    <div class="toast toast_timeout" style="display:none">网络异常，请稍后重试！</div>
    <div class="toast toast_error" style="display:none">信息输入有误</div>
    <div class="loading" style="display:none">
        <img src="img/loading.gif"></div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/handle.js"></script>
<script type="text/javascript" src="js/ask.js"></script>
<script type="text/javascript">
    var fromPage = "${fromPage}";
    var memberNum =  "";
    var memName = "";
    var memImgUrl = "";
    function removeMobile(e) {
        $(e).parents('p').remove();
    };
    $(function () {
        getUserInfo(function () {
            memImgUrl = $("#filePicker").attr("src");
            memberNum =  $("input[name='memberNum']").val();
            memName =  $("input[name='name']").val();
        });
        //轴组详情页面的展开和收起
        $(".type_detail").on('click', function (e) {
            e.preventDefault();
            $("input,select").blur();
            $(".shaft_wrap").animate({
                left: "0"
            }, 200);
        });
        $(".shaft_top span").on('click', function (e) {
            $(".shaft_wrap").animate({
                left: "100%"
            }, 200);

        });


        //选择种类时的交互效果
        $(".vehicle_class span").on('click', function (e) {
            var i = $(this).index();

            $("input,select").blur();
            if ($(this).has('img').length <= 0) {
                $(this).append("<img class='selected_arr' src='img/selected.png'>")
            }
            $(this).addClass('class_selected').siblings('span').removeClass('class_selected').find('img').remove();
            if (i == 1) {
                /*//车种类为货车时，隐藏客车的相关选项
//					$(".vehicle_car_type").hide();
                $(".type_truck").show();
                $(".type_car").hide();
//					$(".weight_out, .type_truck").show();*/

            } else {
                /*//车种类为客车时，隐藏货车的相关选项
                $(".type_truck").hide();
                $(".type_car").show();
//					$(".vehicle_car_type").show();*/
            }
            //移除已选和已填的数据
            $(".vehicle_truck_type option:eq(0),.vehicle_car_type option:eq(0)").attr('selected', 'selected').siblings('option').removeAttr('selected', 'selected');
        });

        //电话过滤非数字
        $(".mobile").on('input', function (e) {
            var input = $(this).val().replace(/\D/ig, '');
            $(this).val(input);
        });
        $("#mobile").on('click', function (e) {
            console.log("增加手机输入框");
            var str = '<p class="weight_out por">' +
                '         <span onclick= "removeMobile(this)"><img src="img/mobile1.png" id="addMobile"></span>手机' +
                '         <input type="text" placeholder="必填" class="weight" maxlength="11" name="mobile"></p>'
            $("#mobileTop").before(str);
        });
        $("#mobile").on('input', function (e) {
            var input = $(this).val().replace(/\D+/ig, "");
            $(this).val(input);
        });

        $(".query").on('click', function (e) {
            var sex = $(".vehicle_truck_type option:selected").attr('data-vehicleType');
            var name = $('[name="name"]').val();
            var birthday = $('[name="birthday"]').val();
            var email = $('[name="email"]').val();
            var wechat = $('[name="wechat"]').val();
            var addr = $('[name="addr"]').val();
            var introduce = $('[name="introduce"]').val();
            var tel = $('[name="tel"]').val();
            if (name == "" || name == null) {
                errorToast("姓名不能为空", 3);
                return;
            }
            var reg2 = /^[0-9]{3,11}$/;//仅为数字
            var mobiles = "";
            var ms = $('[name="mobile"]').length;
            for (var i = 0; i < ms; i++) {
                var mo = $('[name="mobile"]').eq(i).val();
                if (!reg2.test(mo)) {
                    errorToast("请输入正确格式的手机号", 3);
                    return false;
                }
                if (i == ms - 1) {
                    mobiles += mo;
                } else {
                    $('[name="mobile"]').eq(i).val()
                    mobiles += mo + "/";
                }
            }
            if (ms.length < 1) {
                errorToast("请至少填写一个手机", 3);
                return;
            }
            var data = {
                name: name,
                sex: sex,
                birthday: birthday,
                email: email,
                wechat: wechat,
                addr: addr,
                mobiles: mobiles,
                introduce: introduce,
                tel: tel
            };
            updateInfoSubmit(data);
        });
    })
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="js/weixin.js"></script>
<script type="text/javascript">
    var jsApiList = ['onMenuShareTimeline','onMenuShareAppMessage'];
    getSignature(jsApiList, function () {
        shareMemberInfo(memberNum,memName,"${fromUser}",memImgUrl);
    })
</script>
</body>
</html>